<!-- 协议文档 -->
<template>
	<div>
		<!-- 过滤条件 -->
		<div class="filter flex flex-between flex-y">
			<div class="flex flex-y">
				<search
				 	style="width:200px;"
					class="right20"
					tip="请输入关键字"
					@searchOK="searchOK">
				</search>
				<el-checkbox v-model="checked" label="不显示已下线标签"></el-checkbox>
			</div>
			<div class="flex">
				<!-- <el-button @click="ifShowImport =!ifShowImport">Excel导入</el-button> -->
				<el-button type="primary" @click="ifShow = !ifShow">新增</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="main flex">
			<!-- 左边 -->
			<el-scrollbar class="left">
				<p class="title">标签树</p>
				<p class="none" v-if="formData.length == 0">暂无数据</p>
				<el-tree
					v-else
					:data="formData"
					:props="defaultProps"
					node-key="id"
					@node-click="handleNodeClick">
				</el-tree>
			</el-scrollbar>
			<!-- 右边 -->
			<div class="right">
				<div class="title flex flex-y">
					<i class="circle"></i>
					<h3>标签信息</h3>
				</div>
				<div v-if="currentData">
					<el-form
						:model="ruleForm"
						:rules="rules"
						ref="ruleForm"
						label-width="80px"
						class="form">
						<div class="group">
							<el-form-item label="标签名称" prop="name">
								<el-input
									v-model="currentData.content"
									size="small"
									style="width:180px"
									placeholder="请输入">
								</el-input>
							</el-form-item>
							<el-form-item label="上级标签">
								<el-select
									style="width:180px"
									v-model="currentData.parent"
									placeholder="请选择"
									size="small"
									clearable
									filterable>
									<el-option
										v-for="item in ruleForm.list_tabs"
										:key="item.uid"
										:label="item.content"
										:value="item.uid">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</el-form>
					<div class="flex btnGroup">
						<el-button @click.native="modif()">修改</el-button>
						<el-button @click.native="confirmDialog('del')">删除</el-button>
						<el-button @click.native="confirmDialog('off')">下线</el-button>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹窗 - 新增 -->
		<showDialog :ifShow="ifShow" :formData="ruleForm.list_tabs" @newOK="list"></showDialog>
		<!-- 弹窗 - 导入 -->
		<importDialog :ifShow="ifShowImport" :formData="ruleForm.list_tabs"></importDialog>
	</div>
</template>

<script>
import search from '@/components/public/search/search'
import showDialog from '@/components/record/tag'
import importDialog from '@/components/record/importTag'
import qs from 'qs'
import axios from 'axios'
export default {
	components:{
		search,
		showDialog,
		importDialog
	},
	watch:{
		//是否显示已下线
		checked(val){
			this.list();
		}
	},
	data () {
		return {
			//过滤条件
			search:"",
			checked:false,
			//树
			formData:[],
			defaultProps: {
				children: 'searchTags',
				label: 'content'
			},
			currentData:'', //当前选中的值
			//右边
			ruleForm:{
				list_tabs:[]
			},
			rules:{
				name:[
					{
						min:1,
						max: 10,
						message: '必须在1~10字符之间',
						trigger: 'blur' ,
					}
				]
			},

			//弹窗
			ifShow:false,
			ifShowImport:false
		}
	},
	methods:{
		//list
		list:function(){
			HTTP('tag_list', {
				searchStr: this.search,
				status:this.checked?0:''  //0上线,1下线,''所有
			})
			.then(res=>{
				if(res.code == 200){
					this.formData = res.data;
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//加载上级标签
		load_lead:function(){
			HTTP('tag_select')
			.then(res=>{
				if(res.code == 200){
					this.ruleForm.list_tabs = res.data;
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//搜索
		searchOK:function(val){
			console.log(val)
			this.search = val;
			this.list();
		},
		//切换节点
		handleNodeClick:function(e){
			// 后端返的是0，前端转换为空
			if(e.parent == '0'){
				e.parent = '';
			}
			this.currentData = e;
			console.log(e);
		},
		//下线off，删除del
		confirmDialog:function(type){
			let state = type=='off'?'下线':'删除';
			this.$confirm(`确定要${state}该标签吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				type == 'off'?this.off():this.del();
			})
		},
		//删除
		del:function(){
			HTTP('tag_del',{
				uid:this.currentData.uid
			})
			.then(res=>{
				if(res.code == 200){
					this.common.msg('操作成功');
					this.currentData = '';
					this.list();
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//下线
		off:function(){
			HTTP('tag_modif',{
				uid:this.currentData.uid,
				status:1
			})
			.then(res=>{
				if(res.code == 200){
					this.common.msg('操作成功');
					this.currentData = '';
					this.list();
				}
				else{
					this.common.msg(res.msg,'error');
				}
			})
		},
		//修改
		modif:function(){
			if(this.currentData.content){
				if(this.currentData.content.length>10){
					this.common.msg('不能超过10字符','error');
				}
				else{
					HTTP('tag_modif',{
						uid:this.currentData.uid,
						content:this.currentData.content,
						parent:this.currentData.parent
					})
					.then(res=>{
						if(res.code == 200){
							this.common.msg('修改成功');
							this.list();
						}
						else{
							this.common.msg(res.msg,'error');
						}
					})
				}
			}
			else{
				this.common.msg('请输入用户名','error');
			}
		},
		//存cookie
		setCookie:function(name,value){
			var expdate = new Date();   //初始化时间
		    expdate.setTime(expdate.getTime() + 3600 * 24 * 30);   //时间
		    document.cookie = name+"="+value+";expires="+expdate.toGMTString()+";path=/";
		},
	},
	mounted(){
		this.list();
		this.load_lead();
	}
}
</script>

<style lang="scss" scoped>
	//滚动条
	/deep/.el-scrollbar__wrap{
	    overflow-x: hidden;
	}
	.filter{
		padding: 15px 30px 25px 30px;
		background-color: #fff;
	}
	.main{
		background-color: #fff;
		margin-top: 10px;
		padding: 30px 50px;
		height: calc(100vh - 290px);
		//左边
		.left{
			width: 200px;
			border-right: 1px solid #dedede;
			height:100%;
			.title{
				font-size: 13px;
				color: #999;
				padding-bottom: 20px;
				margin-left: 10px;
			}
		}
		//右边
		.right{
			padding: 0 60px;
			.title{
				.circle{
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background-color: $blue;
					margin-right: 10px;
				}
			}
			.form{
				margin: 40px 0 0 8px;
			}
			.btnGroup{
				margin: 40px 0 0 20px;
			}
		}
	}
</style>
